<template>
  <div>
    <hr>
    <button @click="updateName">修改toRef组件的 name 数据</button>
    <h6>toRef 定义响应式数据: {{ obj }}</h6>
  </div>
</template>

<script>
import {reactive, toRef} from "vue";

export default {
  name: "toRef",
  /**
   * toRef是一个函数, 转换响应式对象中的某个属性为段杜响应式数据, 并且值是关联的
   *
   * 使用场景: 有一个响应式对象数据, 但是模板中只需要使用其中一项数据 | 我觉得这个API很少用!
   * #
   * 注意: 从响应式数据对象中解构出的属性数据, 不再是响应式数据
   * @return {{obj: UnwrapNestedRefs<{name: string, age: number}>}}
   */
  setup() {
    // 1.响应式数据对象
    const obj = reactive({
      name: 'ls',
      age: 10
    })
    // Proxy {name: "ls", age: 10} 代理对象
    console.log(obj)

    // name 是一个对象!!!, const关键字不能改变对象的引用, 但是可以改变对象里面的属性引用
    const name = toRef(obj, 'name');
    // ObjectRefImpl {_object: Proxy, _key: "name", __v_isRef: true}
    //
    /*
        {
            "_object": {
              "name": "ls",
              "age": 10
            },
            "value": "ls"   // 这个对象的value属性是它原型对象上的属性
            "_key": "name",
            "__v_isRef": true
        }
     */
    console.log(name)

    const updateName = () => {
      console.log(`Responsive click before ----- obj.name: ${obj.name}`)
      // 不能直接这样修改 name = 'hliushi' ? 为什么
      // 因为这样的话直接将 name这个对象的引用指向为了一个字符串

      // toRef转换响应式数据包装成对象, value存放值的位置
      // obj.name = 'hliushi'
      name.value = 'hliushi'
      console.log(`Responsive click after ----- obj.name: ${obj.name}`)
    }
    return {
      obj,
      name,
      updateName
    }
  }
}
</script>

<style scoped>

</style>
